<template>
  <div>
    <div
      :class="changebgindex == index ? 'car_list_itemwhite' : 'car_list_item'"
      v-for="(item, index) in cararr"
      :key="index"
      @click="changebg(index)"
    >
      <div>
        <span :style="{ color: item.bgclor }">{{ item.value1 }}</span
        ><span class="car_list_number">{{ item.carnumber }}</span
        ><span>{{ item.cardes }}</span>
      </div>
      <div class="car_list_address">
        <div class="car_list_img">
          <img class="addressimg" src="../assets/location.png" alt="" /><span>{{
            item.carlife
          }}</span>
        </div>
        <div>{{ item.cartime }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cararr: [],
  },
  data() {
    return {
      changebgindex: 0,
    };
  },
  methods: {
    changebg: function (i) {
      console.log(i);
      this.$emit("getindex", i);
      this.changebgindex = i;
    },
  },
};
</script>

<style scoped>
.car_list_item {
  padding: 6px 4px 11px 4px;
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
  border-bottom: 1px solid #232524;
  animation: fade-in;
  animation-duration: 2s;
  -webkit-animation: fade-in 2s;
}
.car_list_itemwhite {
  padding: 6px 4px 11px 4px;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border-bottom: 1px solid black;
  animation: fade-in;
  animation-duration: 2s;
  -webkit-animation: fade-in 2s;
}
.car_list_img {
  display: flex;
  align-items: center;
}
.car_list_address {
  display: flex;
  justify-content: space-between;
  color: #9ca4ad;
  margin-top: 10px;
  align-items: center;
}
.addressimg {
  width: 14px;
  height: 14px;
  vertical-align: top;
}
.car_list_number {
  margin: 0 5px;
}
</style>